<template>
  <view>
    <view class="p-3 space-y-3">
      <CalculatorRowCell :left-label="dValue>=0?'剩余（天）':'已过期（天）'"
                         :bg-color="dValue>=0?'bg-green-600':'bg-red-600'">
        <view v-if="validNum===0" class="text-white">
          请输入保质期
        </view>
        <view v-else>
          <view v-if="dValue>=0">
            <u-transition :show="dValue>=0">
              <view class="text-xl">
                {{ Math.abs(dValue) }}
              </view>
            </u-transition>
          </view>
          <view v-else>
            <u-transition :show="dValue<0">
              <view class="text-4xl text-white font-bold">
                {{ Math.abs(dValue) }}
              </view>
            </u-transition>
          </view>
        </view>

      </CalculatorRowCell>
      <CalculatorRowCell left-label="到期日期" bg-color="bg-[#4477CE]">
        <view v-if="validNum===0" class="text-white">
          请输入保质期
        </view>
        <view v-else>
          {{ expireDate }}
        </view>
      </CalculatorRowCell>

      <view class="py-1">
        <u-divider text=""></u-divider>
      </view>
      <CalculatorRowCell left-label="生产日期" bg-color="bg-[#865DFF]">
        <picker mode="date" :value="produceDate" @change="handleProducedDateChange">
          <view>{{ produceDate }}</view>
        </picker>
      </CalculatorRowCell>


      <CalculatorRowCell left-label="保质期" bg-color="bg-[#865DFF]">
        <u-number-box v-model="validNum" @change="handle" :min="0" :max="1000" inputWidth="60"></u-number-box>
      </CalculatorRowCell>
      <CalculatorRowCell left-label="保质期单位" bg-color="bg-[#865DFF]">
        <u-radio-group
            v-model="unit"
            @change="handle">
          <u-radio labelColor="white" activeColor="blue" name="天" label="天"></u-radio>
          <u-radio labelColor="white" activeColor="blue" name="周" label="周"></u-radio>
          <u-radio labelColor="white" activeColor="blue" name="月" label="月"></u-radio>
          <u-radio labelColor="white" activeColor="blue" name="年" label="年"></u-radio>
        </u-radio-group>
      </CalculatorRowCell>
      <u-divider text=""></u-divider>
      <CalculatorRowCell left-label="快捷输入" bg-color="bg-[#0E8388]">
        <view>
          <view v-for="(item,index) in quickValidNumInputList"
                @click="handleQuickValidNumInput(item)"
                :key="index" class="inline-flex">
            <CommonButton
                :plain="true"
                :text="item.text"
                type="default"
            ></CommonButton>
          </view>
        </view>
      </CalculatorRowCell>
    </view>


  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";

import myDayjs from "@/utils/common/myDayjs";
import CalculatorRowCell from "@/pages/calculator/components/CalculatorRowCell.vue";
import CommonButton from "@/components/button/CommonButton.vue";

const produceDate = ref(myDayjs().format('YYYY-MM-DD')); // 生产日期
const expireDate = ref('111');// 过期日期
const validNum = ref(0); //保质期
const unit = ref('天'); //保质期单位
const dValue = ref(0); //剩余天数 过期天数
const quickValidNumInputList = ref([
  {text: '3天', value: 3, unit: '天'},
  {text: '1周', value: 1, unit: '周'},
  {text: '2周', value: 2, unit: '周'},
  {text: '30天', value: 30, unit: '天'},
  {text: '60天', value: 60, unit: '天'},
  {text: '90天', value: 90, unit: '天'},
  {text: '180天', value: 180, unit: '天'},
  {text: '9个月', value: 9, unit: '月'},
  {text: '12个月', value: 12, unit: '月'},
  {text: '18个月', value: 18, unit: '月'},
  {text: '2年', value: 2, unit: '年'},
  {text: '3年', value: 3, unit: '年'},


])


const show = ref(false)
const handleProducedDateChange = (e: any) => {
  produceDate.value = e.detail.value;
  handle()
}
const handleQuickValidNumInput = (e: any) => {

  validNum.value = e.value
  unit.value = e.unit
  handle()
}
const handle = () => {
  if (validNum.value === 0) {
    expireDate.value = produceDate.value
    dValue.value = 0
    return
  }
  if (unit.value === '天') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value - 1, 'days').format('YYYY-MM-DD')
  } else if (unit.value === '周') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value * 7 - 1, 'days').format('YYYY-MM-DD')
  } else if (unit.value === '月') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value * 30 - 1, 'days').format('YYYY-MM-DD')
  } else if (unit.value === '年') {
    expireDate.value = myDayjs(produceDate.value).add(validNum.value * 365 - 1, 'days').format('YYYY-MM-DD')
  }


  //过期
  if(myDayjs(expireDate.value).isBefore(myDayjs())) {
    dValue.value = -myDayjs().diff(myDayjs(expireDate.value), 'days')
    return
  }else {
    dValue.value = myDayjs(expireDate.value).add(1, 'days').diff(myDayjs(), 'days')
  }

}

</script>

<style scoped>
:deep(.u-radio-group) {
  display: flex;
  justify-content: center;

}

:deep(.u-radio) {
  padding: 3px;

}
</style>